
import { useState } from 'react';

function ChildCom2() {

    const [points, setPoints] = useState({
        x: 0,
        y: 0
    })

    function handleMouseMove(e) {
        setPoints({
            x: e.clientX,
            y: e.clientY
        })
    }

    return (
        <div style={{
            width: '400px',
            height: '400px',
            backgroundColor: 'grey',
            position: 'relative',
            overflow: 'hidden'
        }} onMouseMove={handleMouseMove}>
            <h1>移动鼠标!</h1>
            {/* 这里减去 460 是因为要减去左边 div 的宽度 + 两个大 div 之间 50 的间距 */}
            <div style={{
                width: '15px',
                height: '15px',
                borderRadius: "50%",
                backgroundColor: 'white',
                position: 'absolute',
                left: points.x - 5 - 460,
                top: points.y - 5 - 10,
            }}></div>
        </div>
    );
}

export default ChildCom2;